import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { PrimaryBtn } from 'bee/components/Buttons';
import { colors } from 'bee/themes';
import { TotalView, Notes, Email } from 'bee/components/MakePlan';
import PersonInfo from 'bee/containers/MakePlan/PersonInfo';
import styles from 'bee/containers/MakePlan/styles';
import ActiveDate from 'bee/containers/MakePlan/ActiveDate';
import { actions } from 'bee/redux/MakePlanRedux';
import Risks from './Risks';

// @flow
type Props = {
  navigation: Object,
};

const { white } = colors;

class MakePlan extends Component<Props> {
  constructor() {
    super();

    this.close = this.close.bind(this);
    this.open = this.open.bind(this);

    this.state = {
      selectIndex: 0,
      insurerInfo: {}, // 被保人信息
      applicantInfo: {}, // 投保人信息
      activeDate: '', // 指定生效日期
      know: false,
      email: '',
    };
  }

  close() {
    this.mask.close();
  }

  open() {
    this.mask.open();
  }

  render() {
    console.log(this.props.risk);
    const { navigate } = this.props.navigation;

    return (
      <ScrollView style={{ flex: 1 }}>
        <Text style={styles.info}>服务专员：周周周</Text>
        <Text>{JSON.stringify(this.props.risk.insurerInfo)}</Text>
        <PersonInfo
          title="被保险人"
          info={this.props.risk.insurerInfo}
          navigation={this.props.navigation}
          changeInfo={info => {
            this.setState({ insurerInfo: info });
            this.props.changeInsurerInfo(info);
          }}
        />
        <Text>{JSON.stringify(this.props.risk.applicantInfo)}</Text>
        <PersonInfo
          type="applicantInfo"
          title="投保人信息（豁免相关）"
          info={this.props.risk.applicantInfo}
          navigation={this.props.navigation}
          changeInfo={info => {
            this.props.changeApplicantInfo(info);
          }}
        />
        <ActiveDate
          info={this.state.activeDate}
          changeInfo={activeDate => this.setState({ activeDate })}
        />

        <Risks />

        <Notes
          selected={this.state.know}
          onPress={value => {
            this.setState({ know: value });
          }}
        />
        <Email
          email={this.state.email}
          onChange={value => {
            this.setState({ email: value });
          }}
        />

        <View style={styles.buttonView}>
          <TotalView total={20} />
          <View style={{ width: '50%' }}>
            <PrimaryBtn
              text="生成计划书"
              bgc={colors[1001]}
              fontColor={white}
              onPress={() => {
                navigate('CompleteInfo');
              }}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({ risk: state.risk });

const mapDispatchToProps = dispatch => ({
  changeApplicantInfo: info => {
    dispatch(actions.changeApplicantInfo(info));
  },
  changeInsurerInfo: info => {
    dispatch(actions.changeInsurerInfo(info));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MakePlan);
